<template>
	<view>
		<view class="content">
			<view class="content_key">
				<view class="content_fl">
					<text class="text">* </text>
					<text class="text1">名字</text>
				</view>
				<view class="content_fr"><input type="text" v-model="empName" placeholder="请输入名字"/></view>
			</view>
			<view class="content_key">
				<view class="content_fl">
					<text class="text">* </text>
					<text class="text1">手机号</text>
				</view>
				<view class="content_fr"><input type="text" v-model="mobile" placeholder="请输入手机号" /></view>
			</view>
			<view class="content_key">
				<view class="content_fl">
					<text class="text">* </text>
					<text class="text1">身份证号</text>
				</view>
				<view class="content_fr"><input type="number" v-model="identityNumber" placeholder="请输入身份证号" /></view>
			</view>
			<view class="contents">
				<view class="fl">性别</view>
				<view class="fr">
					<view :class="navIndex==0?'active':''" @click="checkIndex(0)">女</view>
					<view :class="navIndex==1?'active':''" @click="checkIndex(1)">男</view>
				</view>
			</view>
			<view class="middles">
				<view class="middle_key"><text>*</text>上传身份证</view>
				<view class="middle_box">
					<view class="uploada" @click="addImagea()">
						<image :src="src"></image>
					</view>
					<view class="uploada1" @click="addImageb()">
						<image :src="src1"></image>
					</view>
				</view>
			</view>
			<view class="content_key">
				<view class="content_fl">
					<text class="text1">开户行</text>
				</view>
				<view class="content_fr"><input type="text" v-model="bankName" placeholder="请输入开户行名称" /></view>
			</view>
			<view class="content_key">
				<view class="content_fl">
					<text class="text1">银行卡号</text>
				</view>
				<view class="content_fr"><input type="text" v-model="bankAccount" placeholder="请输入银行卡号" /></view>
			</view>
		</view>
		<view class="view_nav" v-show="jiazaizhong">
			<view><u-loading-icon size="50" color="#fff"></u-loading-icon></view>
		</view>
		<view class="footer" @click="EmployeeUpdate()">修改</view>
	</view>
</template>

<script>
	import {
		EmployeeUpdate
	} from '@/public/Api/update.js'
	import {
		setValue,
		getValue
	} from '@/public/storeage/index.js'
	export default {
		data() {
			return {
				navIndex:0,
				needsex:0,
				id:'',
				empName:'',
				mobile:'',
				identityNumber:'',
				bankName:'',
				bankAccount:'',
				src:'',  // 上传身份证 -- 国徽面
				srcV:'' ,
				src1:'', // 上传身份证 -- 人像面
				src1V:''  ,
				jiazaizhong:false,
			}
		},
		onLoad(options) {
			console.log(options)
	        this.navIndex=options.sex
			this.id=options.id
			this.empName=options.empName
			this.mobile=options.mobile
			this.identityNumber=options.identityNumber
			this.bankName=options.bankName
			this.bankAccount=options.bankAccount
			this.src = 'https://syh-1.oss-cn-shanghai.aliyuncs.com/' + options.idNumberPic
			this.src1 = 'https://syh-1.oss-cn-shanghai.aliyuncs.com/' + options.idNumberPic2
			this.srcV=options.idNumberPic
			this.src1V=options.idNumberPic2
		},
		methods: {
			checkIndex(e){
				this.navIndex = e
				if(e == 0){
					this.needsex = 0
				}else{
					this.needsex = 1
				}
				console.log(this.needsex)
			},
			// 上传身份证 -- 国徽面
			addImagea() {
				var that = this;
				// let token = getValue('token')
				// 从本地相册选择图片或使用相机拍照。
				uni.chooseImage({
					count: 10, //最多可以选择的图片张数，默认9
					//album 从相册选图，camera 使用相机，默认二者都有。
					sourceType: ['album'],
					success: function(res) {
						//获取图片信息。
						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: function(image) {
								that.jiazaizhong = true
								// that.src = (res.tempFilePaths[0]);
								// console.log(that.src); //打印出图片信息,在浏览器上打开就是你上传的图片
								//将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data
								uni.uploadFile({
									//开发者服务器 url
									url: 'https://api.syh56.com:21026/api/UploadOSS',
									//获取要上传文件资源的路径。
									// filePath: res.tempFilePaths[0],
									filePath:res.tempFilePaths[0],
									//文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
									name: 'files',
									//HTTP 请求 Header, header 中不能设置 Referer。
									header: {
										'Abp.TenantId':'1',
										'content-type':'multipart/form-data'
									},
									//成功的回调fullurl
									success: uploadFileRes => {
										console.log(uploadFileRes)
										//获取图片信息 网站域名 + res1.data.url就是一个图片的完整路径了
										var res1 = JSON.parse(uploadFileRes.data);
										//uni.setStorageSync('sfzzm', res1.result); //身份证国徽
										that.src = (res.tempFilePaths[0]);
										that.srcV = res1.result //身份证国徽
										that.jiazaizhong = false
									}
								})
							}
						})
					}
				})
			},
			
			// 上传身份证 -- 人像面
			addImageb() {
				var that = this;
				// let token = getValue('token')
				console.log(123)
				// 从本地相册选择图片或使用相机拍照。
				uni.chooseImage({
					count: 10, //最多可以选择的图片张数，默认9
					//album 从相册选图，camera 使用相机，默认二者都有。
					sourceType: ['album'],
					success: function(res) {
						//获取图片信息。
						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: function(image) {
								that.jiazaizhong = true
								// that.src1 = (res.tempFilePaths[0]);
								// console.log(that.src1); //打印出图片信息,在浏览器上打开就是你上传的图片
								//将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data
								uni.uploadFile({
									//开发者服务器 url
									url: 'https://api.syh56.com:21026/api/UploadOSS',
									//获取要上传文件资源的路径。
									// filePath: res.tempFilePaths[0],
									filePath:res.tempFilePaths[0],
									//文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
									name: 'files',
									//HTTP 请求 Header, header 中不能设置 Referer。
									header: {
										'Abp.TenantId':'1',
									},
									//成功的回调fullurl
									success: uploadFileRes => {
										//获取图片信息 网站域名 + res1.data.url就是一个图片的完整路径了
										var res1 = JSON.parse(uploadFileRes.data);
										//uni.setStorageSync('sfzfm', res1.result); //身份证人像
										that.src1 = (res.tempFilePaths[0]);
										that.src1V = res1.result; //身份证人像
										that.jiazaizhong = false
									}
								})
							}
						})
					}
				})
			},
			async EmployeeUpdate() {
				var id=this.id
				var empName=this.empName
				var mobile = this.mobile
				var sex = this.needsex
				var identityNumber = this.identityNumber
				var idNumberPic = this.srcV
				var idNumberPic2 = this.src1V
				var bankName=this.bankName
				var bankAccount=this.bankAccount
					if (empName == '') {
						uni.showToast({
							title: "姓名不能为空",
							icon: 'none',
							duration: 2000
						})
						return false
					}
					if (mobile == '') {
						uni.showToast({
							title: "手机号不能为空",
							icon: 'none',
							duration: 2000
						})
						return false
					}
					if (identityNumber == '') {
						uni.showToast({
							title: "身份证不能为空",
							icon: 'none',
							duration: 2000
						})
						return false
					}
					if (idNumberPic == '' || idNumberPic == null) {
						uni.showToast({
							title: "身份证国徽面不能为空",
							icon: 'none',
							duration: 2000
						})
						return false
					}
					if (idNumberPic2 == '' || idNumberPic2 == null) {
						uni.showToast({
							title: "身份证人像面不能为空",
							icon: 'none',
							duration: 2000
						})
						return false
					}
					if (bankAccount == '') {
						uni.showToast({
							title: "银行卡号不能为空",
							icon: 'none',
							duration: 2000
						})
						return false
					}
					if (bankName == '') {
						uni.showToast({
							title: "支行名称不能为空",
							icon: 'none',
							duration: 2000
						})
						return false
					}
				try {
					const {
						data: res
					} = await EmployeeUpdate({
						id,
						empName,
						mobile,
						sex,
						identityNumber,
						idNumberPic,
						idNumberPic2,
						bankName,
						bankAccount
						
					})
					if(res.success==true){
						uni.showToast({
							title: `${res.result}`,
							icon: 'none',
						})
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/PersonalCenter/manage'
							})
						}, 600)
					}
					
			
				} catch (e) {}
			
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding: 15upx;
	}
	.contents {
		width: 100%;
		background-color: #fff;
		padding: 20upx;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5, 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
		margin-top: 20upx;
		border-radius: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		.fl {
			font-size: 32upx;
			color: #000;
			font-weight: bold;
		}
	
		.fr {
			display: flex;
			align-items: center;
	
			view {
				margin-left: 20upx;
				width: 140upx;
				height: 50upx;
				opacity: 1;
				border-radius: 10upx;
				border: 2upx solid #EF4D3D;
				font-size: 28upx;
				color: #EF4D3D;
				text-align: center;
				line-height: 46upx;
			}
	
			.active {
				width: 140upx;
				height: 50upx;
				opacity: 1;
				border-radius: 10upx;
				background: #EF4D3D;
				font-size: 28upx;
				color: #fff;
				text-align: center;
				line-height: 50upx;
			}
		}
	}
	
	.content {
		width: 100%;
		border-radius: 17upx;
		background: #FFFFFF;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #bababa;
		background-color: #fff;
		padding: 0 20upx;

		.content_key {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 105upx;
			border-bottom: 1upx solid #e5e5e5;

			.content_fl {
				display: flex;
				align-items: center;

				text {
				
					font-size: 31upx;
					font-weight: bold;
					color: #000;
				}
                 
				.text {
					color: #EF4D3D;
					margin-right: 10upx;
				}
				.text1{
				width: 200upx;		
				}
			}

			.content_fr {
				display: flex;
				align-items: center;

				image {
					width: 32upx;
					height: 32upx;
				}

				text {
					display: block;
					text-align: left;
					font-size: 28upx;
					width: 270upx;
				}

				input {
					font-size: 28upx;
					text-align: left;
				}
			}
		}
	}

	.middle {
		width: 100%;
		border-radius: 17upx;
		background: #FFFFFF;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #bababa;
		padding: 30upx;
		margin-top: 20upx;

		textarea {
			width: 100%;
			height: 110upx;
		}

		view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20upx;

			image {
				width: 170upx;
				height: 47upx;
			}

			text {
				width: 96upx;
				height: 47upx;
				font-size: 28upx;
				text-align: center;
				line-height: 47upx;
				color: #fff;
				border-radius: 17upx;
				background: #EF4D3D;
			}
		}
	}

	.footer {
		width: 526upx;
		height: 71upx;
		opacity: 1;
		border-radius: 17upx;
		background: #EF4D3D;
		font-size: 31upx;
		font-weight: 500;
		text-align: center;
		line-height: 71upx;
		position: fixed;
		bottom: 80upx;
		left: 112upx;
		color: #fff;
		font-weight: bold;
	}
	.middles {
		margin-top: 20upx;
		// border-radius: 17.52upx;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc, 1.75upx 1.75upx 7.01upx 0px #cccccc;
		padding: 30upx 25upx;
		background-color: #fff;
	
		.middle_key {
			display: flex;
			align-items: center;
			font-size: 32upx;
			font-weight: bold;
			padding-top: 25upx;
	
			text {
				color: #EF4D3D;
				padding-right: 10upx;
			}
		}
	
		.middle_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 28upx;
			
			.uploada {
							background: url('@/static/iocn37.png') no-repeat;
							background-size: 300upx 162upx;
			
						}
			
						.uploada1 {
							background: url('@/static/iocn38.png') no-repeat;
							background-size: 300upx 162upx;
			
						}
	
			image {
				width: 305upx;
				height: 168upx;
			}
		}
	}
	.view_nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 9999;
		// v-show="jiazaizhong"
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
